class Player {
  constructor(name) {
    this.name = name;
    this.operation = 0;
    this.target = "";
    this.die = false;
  }
  addIn(players, turn) {
    
  }
  lost() {
    this.die = true;
  }
}

class Self extends Player {
  constructor(name) {
    super(name);
    this.ammo = 0;
  }
  setOpeAmmo() {
    this.operation = 0;
    this.target = "";
    this.ammo++;
  }
  setOpeDefe() {
    this.operation = 1;
    this.target = "";
  }
  setAtt(num) {
    this.operation = num;
  }
  setOpeAtt(target) {
    this.target = target;
    this.ammo = this.ammo +1 -this.operation;
  }
}

let buttons = document.getElementById("d-b"),
    addAmmo = document.getElementById("b-z"),
    defense = document.getElementById("b-f"),
    attack = document.getElementById("b-k"),
    attack1 = document.getElementById("b-d"),
    attack2 = document.getElementById("b-s"),
    attack3 = document.getElementById("b-h"),
    continu = document.getElementById("con");
attack.disabled = true;
attack1.disabled = true;
attack2.disabled = true;
attack3.disabled = true;
let number = (new URLSearchParams(location.search)).get("number");
let self = new Self("you");
let result, shotting = false;
function turnDone(){
  addAmmo.disabled = true;
  defense.disabled = true;
  attack1.disabled = true;
  attack2.disabled = true;
  attack3.disabled = true;
  /* [result, statu] = game.nextTurn(self);
  if ((result.get("you"))[2] === 0 || statu){
    [...buttons.children].forEach((child) => {buttons.removeChild(child);});
    buttons.appendChild(continu);
    document.addEventListener("mousedown", function(){
      if ((result.get("you"))[2] === 0){
        location.assign("./lost/lost.html");
      } else if (statu){
        location.assign("./win/win.html");
      }
    });
  } */
  addAmmo.disabled = false;
  defense.disabled = false;
  if (self.ammo > 0){
    attack.disabled = false;
    attack1.disabled = false;
  }
  if (self.ammo > 1){
    attack2.disabled = false;
  }
  if (self.ammo > 2){
    attack3.disabled = false;
  }
};

let r = 200, pos = new Map(), mx, my;
let canva = document.getElementById("c-m");
document.addEventListener('mousemove', function(event) {
  mx = event.clientX - canva.offsetLeft;
  my = event.clientY - canva.offsetTop;
});
let turtle = canva.getContext("2d");
let imgYou = new Image(),
    imgOth = new Image();
imgYou.src = "you.png";
imgOth.src = "other.png";
/* game.players.forEach(player => {
  const name = player.name;
  if (name !== "you"){
    const a = 2*(Math.PI)*parseInt(name)/(game.players.length);
    pos.set(name, [-(Math.cos(a))*r, Math.sin(a)*r]);
  }
}); */
canva.addEventListener('click', () => {
  if (shotting){
    let target;
    pos.forEach((xy, name) =>{
      if (xy[0]+r <mx && xy[0]+mx >xy[0]-r && xy[1]+r <my && xy[1]+128 >my-r){
        if (result.has(name) && (result.get(name))[2] !== 0){
          target = name;
        }
      }
    });
    if (typeof target === "undefined"){
      return;
    }
    shotting = false;
    self.setOpeAtt(target);
    turnDone();
  }
});

imgOth.onload = function(){draw()};
function arrow(xf, yf, xt, yt, s=30, d=Math.PI/6, n=1){
  const angle = Math.atan2(yt - yf, xt - xf);
  if (n === 1){
    turtle.moveTo(xf, yf);
    turtle.lineTo(xt, yt);
    turtle.stroke();
    turtle.closePath();
  } else if (n === 2){
    turtle.translate(xf, yf);
    turtle.rotate(angle-Math.PI/2);
    turtle.moveTo(-10, 0);
    turtle.lineTo(-10, Math.sqrt((xt-xf)**2+(yt-yf)**2)-10);
    turtle.moveTo(+10, 0);
    turtle.lineTo(+10, Math.sqrt((xt-xf)**2+(yt-yf)**2)-10);
    turtle.stroke();
    turtle.closePath();
    turtle.restore();
    turtle.save();
  }
  turtle.beginPath();
  turtle.moveTo(xt, yt);
  turtle.lineTo(xt- Math.cos(angle-d)*s,yt -Math.sin(angle-d)*s);
  turtle.lineTo(xt- Math.cos(angle+d)*s,yt -Math.sin(angle+d)*s);
  turtle.closePath();
  turtle.fill();
}
function oper(operation, x, y){
  turtle.save();
  const [ope, target, statu] = operation;
  if (ope === 0){
    turtle.moveTo(x+20, y+100);
    turtle.lineTo(x+100, y+100);
    turtle.moveTo(x+60, y+60);
    turtle.lineTo(x+60, y+140);
    turtle.stroke();
    turtle.closePath();
  } else if (ope === 1){
    turtle.arc(x+64, y+64, 70, 0, Math.PI*2);
    turtle.stroke();
    turtle.closePath();
  } else if (ope < 2 || target === ""){
    turtle.closePath();
  } else {
    let xf = x+64, yf = y+100, xt, yt;
    if (target !== "you"){
      xt = (pos.get(target)[0])+60,yt = (pos.get(target)[1])+60;
    } else if (target === "you"){
      xt = -r+60, yt = 60;
    }
    if (ope === 2){
      turtle.strokeStyle = "yellow";
      turtle.fillStyle = "yellow";
      if (result.has(target)){
         const [ope1, target1, statu1] = result.get(target);
         if (ope1 === 1 && statu1 === 1){
           const angle = Math.atan2(yt - yf, xt - xf);
           xt = xt - 70*Math.cos(angle);
           yt = yt - 70*Math.sin(angle);
         }
      }
      arrow(xf, yf, xt, yt);
    } else if (ope === 3){
      arrow(xf, yf, xt, yt, s=40, d=Math.PI/3, n=2);      
    } else if (ope === 4){
      turtle.lineWidth = 10;
      turtle.strokeStyle = "purple";
      turtle.fillStyle = "purple";
      arrow(xf, yf, xt, yt, s=50, d=Math.PI/4);
    }
  }
  turtle.restore();
}
function cross(x1, y1, x2, y2){
  turtle.moveTo(x1, y1);
  turtle.lineTo(x2, y2);
  turtle.moveTo(x2, y1);
  turtle.lineTo(x1, y2);
  turtle.stroke();
  turtle.closePath();
}
function draw(){
  turtle.clearRect(0, 0, 600, 600);
  turtle.save();
  turtle.lineWidth = 5;
  turtle.strokeStyle = "red";
  turtle.fillStyle = "red";
  turtle.lineCap = "round";
  turtle.translate(r, r);
  turtle.drawImage(imgYou, -r, 0, 128, 128);
  turtle.beginPath();
  oper(result.get("you"), -r, 0);
  pos.forEach((xy, name)=> {
    const [x, y] = xy;
    turtle.drawImage(imgOth, x, y, 128, 128);
    turtle.beginPath();
    if (result.has(name)){
      oper(result.get(name), x, y);
      if ((result.get(name))[2] === 0){
        turtle.beginPath();
        cross(x+20, y+20, x+110, y+110);
      }
    } else {
      cross(x+20, y+20, x+110, y+110);
    }
  });
  turtle.restore();
  if (shotting){
    turtle.beginPath();
    arrow(64, 100+r, mx, my);
  }
  requestAnimationFrame(draw);
}

addAmmo.onclick = function(){shotting=false;self.setOpeAmmo();turnDone();};
defense.onclick = function(){shotting=false;self.setOpeDefe();turnDone();};
attack1.onclick = function(){self.setAtt(2);shotting = true;};
attack2.onclick = function(){self.setAtt(3);shotting = true;};
attack3.onclick = function(){self.setAtt(4);shotting = true;};
attack.onclick = function(){
  buttons.removeChild(attack);
  buttons.appendChild(attack1);
  buttons.appendChild(attack2);
  buttons.appendChild(attack3);
};